<template>
    <div class="didlist">
        <Table border :columns="columns12" :data="dataList.rows">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button> -->
                <Button type="primary" size="small" @click="detailFun(row,index)">详情</Button>
            </template>
        </Table>
        <div class="page">
          <Page
            :total="dataList.total"
            :current="dataList.pageNum"
            :page-size="dataList.pageSize"
            @on-change="pageChange"
          />
        </div>
        <Modal
            v-model="detailShow"
            title="详情"
            footer-hide
            width="800">
            <json-viewer :value="credentialJson" :expand-depth=4 copyable  sort></json-viewer>
            <div class="footer-btn" v-if="verifyCredentialData.errorCode == 0 && verifyCredentialData.result == true">
              <Button type="error" size="small" @click="remove">撤销</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import expandRow from './table-expand.vue';
    import { mapActions } from 'vuex'
    import { Modal } from 'iview';
    export default {
        name: 'dashboard-console',
        components: { expandRow },
        data () {
            return {
                columns12: [
                    // {
                    //     type: 'expand',
                    //     width: 50,
                    //     render: (h, params) => {
                    //         return h(expandRow, {
                    //             props: {
                    //                 row: params.row
                    //             }
                    //         })
                    //     }
                    // },
                    {
                        title: 'personId',
                        key: 'personId',
                        width: 200,
                        render: (h, params) => {
                            const row = params.row
                            return h(
                                'span',
                                row.didInfo.personId
                            )
                        }
                    },
                    {
                        title: 'did',
                        key: 'did',
                        render: (h, params) => {
                            const row = params.row
                            return h(
                                'span',
                                row.didInfo.did
                            )
                        }
                    },
                    {
                        title: 'publicKey',
                        key: 'publicKey',
                        render: (h, params) => {
                            const row = params.row
                            return h(
                                'span',
                                row.didInfo.publicKey
                            )
                        }
                    },
                    {
                        title: 'credentialJson',
                        key: 'credentialJson',
                        ellipsis: true
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime',
                        width: 180,
                        render: (h, params) => {
                            const row = params.row
                            return h(
                                'span',
                                this.dateFormat(row.updateTime)
                            )
                        }
                    },
                    {
                        title: 'Action',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                dataList: {
                    rows: [],
                    total: 0,
                    pageNum: 1,
                    pageSize: 5
                },
                detailShow: false,
                detailData: {},
                credentialJson: '',
                verifyCredentialData: {}
            }
        },
        methods: {
            ...mapActions('admin/account', ['getCredentialList', 'credentialRevoke', 'verifyCredential']),
            /**
             * @description
             *
             */
            getCredentialListFun () {
                const page = this.dataList.pageNum - 1
                const size = this.dataList.pageSize
                this.getCredentialList({
                    page,
                    size
                }).then(resp => {
                    this.dataList.rows = resp.result.content
                    this.dataList.total = resp.result.totalElements
                })
            },
            pageChange (page) {
                this.dataList.pageNum = page
                this.getCredentialListFun()
            },
            detailFun (row) {
                this.detailData = row;
                this.credentialJson = JSON.parse(this.detailData.credentialJson)
                const verifyCredentialModel = this.credentialJson
                this.detailShow = true
                this.verifyCredential({
                    verifyCredentialModel
                }).then(resp => {
                    this.verifyCredentialData = resp
                })
            },
            remove (row) {
                const id = this.detailData.id
                var that_ = this
                Modal.confirm({
                    title: '提示',
                    content: '您确定撤销此证书吗？',
                    onOk () {
                        that_.credentialRevoke({
                            id
                        }).then(resp => {
                            if (resp.errorCode === 0) {
                                that_.$Notice.success({
                                    title: '提示',
                                    desc: '撤销成功'
                                });
                            } else {
                                that_.$Notice.success({
                                    title: '提示',
                                    desc: resp.errorMessage
                                });
                            }
                        })
                    }
                });
            },
            dateFormat: function (tick) {
                return this.$moment(tick).format('YYYY-MM-DD HH:mm:ss')
            },
            onclick (row, index) {
                console.log(row)
                console.log(index)
            }
        },
        mounted () {
            this.getCredentialListFun()
        }
    }
</script>
<style lang="less" scoped>
.didlist{
    background: #fff;
    border-radius: 4px;
    padding: 14px;
}
.ivu-tooltip-inner {
  max-width: 800px !important;
  word-break: break-all;
}
.footer-btn{
    text-align: center;
    .ivu-btn {
          width: 220px;
          height: 40px;
          font-size: 16px;
          letter-spacing: 3px;
    }
}
</style>
